<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StudentList</title>
</head>
<body>
<div id="app">
  <table border="1px" width="800px">
    <tr>
      <th>编号</th>，<th>姓名</th>,<th>年龄</th>,<th>性别</th>,<th>身份证号</th>,<th>住址</th>
    </tr>
    <tr v-for="stu in students">
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.gender}}</td>
      <td>{{stu.idcard}}</td>
      <td>{{stu.address}}</td>
    </tr>
  </table>
</div>
<!--导入Vue的js文件-->
<script src="js/vue.min.js"></script>
<!--导入axios的js文件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  //创建Vue
  new Vue({
    el:"#app",
    data:{
      students:[]//学生集合
    },
    methods:{
      //连接后台，加载学生数据
      loadStudents(){
        //调用axios的get方法，get/post/delete/put向后台发出请求
        //then是处理数据
        axios.get("http://localhost:8080/test1")
                .then(result=>{
                  console.log(result.data)
                  if(result.data.data){
                    //绑定后台的数据到前面的模型中
                    this.students=result.data.data;
                  }

        });
      }
    },
    //组件挂载完成后调用加载学生方法
    mounted() {
      this.loadStudents();
    }
  })
</script>
</body>
</html>